
<script setup>
import { getDataStatistics } from '@/api/book/index.js'
import { onMounted, reactive, ref, watchEffect  } from 'vue'
import { useUserStore } from '@/store/modules/user.js'
const userStore = useUserStore()
const authorId = userStore.userInfo.id
let infoList = reactive({
  dataSource: []
})
let loading = ref(true)
const loadData = () => {
  getDataStatistics({ authorId, pageNum: 0, pageSize: 20, scope: date.value})
  .then(res => {
    infoList.dataSource = res.records || []
    loading.value = false
  })
  .finally(() => {
    loading.value = false
  })
  .catch(err => {
    message.error(err || '请求失败')
  })
}
onMounted(() => {
  loadData()
})
const columns = [
  {
    title: '小说名称',
    dataIndex: 'novelTitle'
  },
  {
    title: '浏览量',
    dataIndex: 'readNums',
    align: 'center'
  },
  {
    title: '评论数',
    dataIndex: 'commentNums',
    align: 'center',
  },
  {
    title: '更新字数',
    dataIndex: 'updateWordNums',
    align: 'center',
  },
  {
    title: '订阅数',
    dataIndex: 'subscribeNum',
    slots: {
      customRender: 'subType',
    }
  },
  {
    title: '更新章节数',
    dataIndex: 'updateChapterNums',
    align: 'center'
  }
]
const date = ref(1)
const setDate = e => {
  date.value = e.target.value
}
watchEffect(() => {
  loadData()
}, date)
</script>
<template>
<div class="book-manage">
  <div class="wrappers">
      <div class="title">数据列表</div>
      <a-radio-group v-model:value="date" button-style="solid" @change="setDate">
        <a-radio-button :value="1">昨天</a-radio-button>
        <a-radio-button :value="2">今天</a-radio-button>
        <a-radio-button :value="3">本月</a-radio-button>
      </a-radio-group>
  </div>
  <a-table 
    :dataSource="infoList.dataSource"
    :columns="columns" 
    :loading="loading"
    :rowKey="record => record?.novelId" 
  >
    <template #subType="{ record }">
        <a-tag  v-if="record.subscribeNum > 0" color="success">{{ record.subscribeNum }}</a-tag>
        <a-tag  v-else color="processing">{{ record.subscribeNum }}</a-tag>
    </template>
  </a-table>
</div>
</template>

<style lang="less" scoped>
.wrappers {
  display:flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 20px;
  .title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 21px;
  }
}
.book {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .cover {
    width: 94px;
    img {
      width: 94px;
      height: 124px;
    }
  }
  .info {
    flex: 1;
    padding-left: 10px;
    .wrapper {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>